<template>
  <div class="monitoring">
    <div class="taskInfo">
      <div>
        <div class="boxInfo dbInfo">
          <div>
            <p class="title">任务名称：{{ jobdata.jobName }}</p>
            <p>状态：{{ jobdata.status }}</p>
            <p>下次执行时间：{{ jobdata.jobNextExecutionTime }}</p>
            <p>当前同步速度：{{ jobdata.jobSpeed }} 条/秒</p>
          </div>
          <div>
            <img src="../../../assets/images/sqlocr.png" />
          </div>
        </div>
      </div>
      <div>
        <div class="boxInfo">
          <el-row>
            <el-col :span="8">
              <!-- <div class="boxChart" id="tbsjlChart"></div> -->
              <div class="boxImage">
                <img src="../../../assets/images/tongbujilushu.png" />
                <p class="text">
                  <span class="number">{{
                    getCommaFormat(obj_number.dataNum)
                  }}</span>
                  {{ obj_number.dataNumUnit || "万条" }}
                </p>
                <p class="title">同步记录数</p>
              </div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <!-- <div class="boxChart" id="tbjlsChart"></div> -->
              <div class="boxImage">
                <img
                  src="../../../assets/images/mubiaoshujuyuanzongtiaoshu.png"
                />
                <p class="text">
                  <span class="number">{{
                    getCommaFormat(obj_number.dataSourceNum)
                  }}</span>
                  {{ obj_number.dataSourceNumUnit || "万条" }}
                </p>
                <p class="title">目标数据源总条数</p>
              </div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <!-- <div class="boxChart" id="gxjlsChart"></div> -->
              <div class="boxImage">
                <img
                  src="../../../assets/images/mubiaoshujuyuanzongliang.png"
                />
                <p class="text">
                  <span class="number">{{
                    getCommaFormat(obj_number.dataSourceSize)
                  }}</span>
                  {{ obj_number.dataSourceSizeUnit || "万条" }}
                </p>
                <p class="title">目标数据源总量</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="boxInfo">
          <el-row>
            <el-col :span="12">
              <div class="boxChart" id="cpuLoadChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="12">
              <div class="boxChart" id="realtimesytChart"></div>
              <el-divider direction="vertical"></el-divider>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="taskInfo-mid clearfix" v-show="showdraw">
      <div class="taskInfo-mid-topnav">
        <div class="taskInfo-mid-topnav-left">
          <span>同步数据记录数监控</span>
        </div>
        <div class="taskInfo-mid-topnav-right">
          <el-select
            v-model="value"
            size="mini"
            placeholder="请选择"
            @change="changelist(value)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="taskInfo-mid-main">
        <div class="boxChart" id="syncdataChart"></div>
        <!-- <el-divider direction="vertical"></el-divider> -->
      </div>
    </div>
    <div class="taskInfo-mid clearfix" v-show="showdraw">
      <div class="taskInfo-mid-topnav">
        <div class="taskInfo-mid-topnav-left">
          <span>同步数据速率监控</span>
        </div>
        <div class="taskInfo-mid-topnav-right">
          <el-select
            v-model="value"
            size="mini"
            placeholder="请选择"
            @change="changelist"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="taskInfo-mid-main">
        <div class="boxChart" id="syncdatarateChart"></div>
        <!-- <el-divider direction="vertical"></el-divider> -->
      </div>
    </div>
    <div class="datafromnav" @click="handclckshow">
      数据同步日志
      <i
        :class="
          this.showdraw == true ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
        "
      ></i>
    </div>
    <div class="datafrom" v-show="!showdraw">
      <el-form
        :inline="true"
        style="margin-left: 50px; margin-top: 25px"
        :model="formInline"
        size="mini"
        class="demo-form-inline"
      >
        <el-form-item label="源表名称">
          <el-input v-model="reqserdata.tableName"></el-input>
        </el-form-item>
        <el-form-item label="任务起止日期">
          <el-date-picker
            v-model="reqserdatadate"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" height="500" style="width: 100%" border>
        <el-table-column
          prop="readerTable"
          label="接口数据源名称"
        ></el-table-column>
        <el-table-column
          prop="startdate"
          label="任务开始时间"
        ></el-table-column>
        <el-table-column prop="stopdate" label="任务结束时间"></el-table-column>
        <el-table-column
          prop="totalTaskTime"
          label="任务总耗时（秒）"
        ></el-table-column>
        <!-- <el-table-column prop="name" label="源表名称"></el-table-column> -->
        <!-- <el-table-column prop="name" label="目标表名称"></el-table-column> -->
        <el-table-column
          prop="numWrite"
          label="同步记录数（条）"
        ></el-table-column>
        <el-table-column
          prop="nerrors"
          label="错误记录数（条）"
        ></el-table-column>
        <el-table-column
          prop="byteWrite"
          label="同步数据量（kb）"
        ></el-table-column>
        <el-table-column
          prop="averageNumWrite"
          label="平均记录数（条/秒）"
        ></el-table-column>
        <el-table-column
          prop="averageByteWrite"
          label="平均数据数（kb/秒）"
        ></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">执行中</span>
            <span v-if="scope.row.status == 200">成功</span>
            <span v-if="scope.row.status == 500">失败</span>
          </template>
        </el-table-column>
         <el-table-column
          prop="errorMsg"
          label="错误信息"
          :show-overflow-tooltip="true"
        ></el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="reqserdata.pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="reqserdata.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- <znxd-list :column="tableData" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list> -->
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts-liquidfill";
import { tbsjldata, tbsjloption } from "@/assets/js/chart_tbsjl";
import { datas, options } from "@/assets/js/chart_tbjls";
import { gxdata, gxoption } from "@/assets/js/chart_gxjls";

import cpuLoadOption from "@/assets/js/chart_load_cpu";
import Realtimesyt from "@/assets/js/chart_Realtimesyt";
import syncdata from "@/assets/js/chart_syncdata";
import syncdatarate from "@/assets/js/chart_syncdatarate";
import {
  list,
  Searchlist,
  ratelist,
  averate,
  leftaverate,
  asyncrigave,
  totalNumber
} from "@/api/task/monitoring.js";
import { toCommaFormat } from "@/utils/data.js";

export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "近一周"
        },
        {
          value: "2",
          label: "近一个月"
        },
        {
          value: "3",
          label: "近一年"
        },
        {
          value: "4",
          label: "近三年"
        }
      ],
      timer: "",
      // 左上角数据
      jobdata: {
        jobFrom: "",
        jobId: "",
        jobName: "",
        jobNextExecutionTime: "",
        jobSpeed: "",
        jobStatus: "",
        jobTo: "",
        status: ""
      },
      value: "1",
      showdraw: true,
      pagedata: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      reqserdata: {
        jobInfoId: "",
        pageNo: 1,
        pageSize: 10,
        startData: "",
        stopData: "",
        tableName: ""
      },
      reqserdatadate: "",
      tableData: [],
      // 列表配置
      formInline: {
        user: "",
        value1: ""
      },
      obj_number: {
      }
    };
  },
  methods: {
    // 数据同步日志
    handclckshow() {
      this.showdraw = !this.showdraw;
      if (this.showdraw) return;
      let row = this.$route.query;
      this.reqserdata.jobInfoId = row.jobInfoId
      this.connentSearchlist(this.reqserdata);
    },
    connentSearchlist(obj) {
      obj.type = this.$route.query.type;
      Searchlist(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          this.tableData = data.content;
          this.total = data.total;
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    // 左上角
    getleftracedata(obj) {
      leftaverate(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          this.jobdata = data.data;
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    // 仪表盘同步速率
    getaveratedata(obj) {
      averate(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          Realtimesyt.series[0].data[0].value = data.data.avgRate;
          var realtimesytChart = echarts.init(
            document.getElementById("realtimesytChart")
          );
          realtimesytChart.setOption(Realtimesyt);
          realtimesytChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    // 仪表盘同步速率
    getasyncdata(obj1) {
      asyncrigave(obj1).then(res => {
        let { data } = res
        if (data.code === "200") {
          cpuLoadOption.series[0].data[0].value = data.data.rate;
          this.jobdata.jobSpeed = data.data.rate || "";
          this.jobdata.status = data.data.status || "";
          var cpuLoadChart = echarts.init(document.getElementById("cpuLoadChart"));
          cpuLoadChart.setOption(cpuLoadOption);
          cpuLoadChart.resize();
          // 水球图
          // // 同步记录数
          // datas.length = 0
          // datas.push(data.data.totalDataRate / 100)
          // options.series[0].data.push(data.data.totalDataRate);
          // options.graphic[0].children[0].style.text = `已同步：${data.data.totalDataNum}条`;
          // var tbjlsChart = echarts.init(document.getElementById("tbjlsChart"));
          // tbjlsChart.setOption(options);
          // tbjlsChart.resize();
          // // 更新记录数
          // tbsjldata.length = 0
          // tbsjldata.push(data.data.updateDataRate / 100)
          // tbsjloption.series[0].data.push(data.data.updateDataRate);
          // tbsjloption.graphic[0].children[0].style.text = `更新：${data.data.updateDataNum}条`;
          // var tbsjlChart = echarts.init(document.getElementById("tbsjlChart"));
          // tbsjlChart.setOption(tbsjloption);
          // tbsjlChart.resize();
          // // // // 同步数据量
          // gxdata.length = 0
          // gxdata.push(data.data.dataSizeRate / 100)
          // gxoption.graphic[0].children[0].style.text = `已同步：${data.data.dataSize}`;
          // var gxjlsChart = echarts.init(document.getElementById("gxjlsChart"));
          // gxjlsChart.setOption(gxoption);
          // gxjlsChart.resize();
        }
      })
    },
    getTotalNumber(obj) {
      totalNumber(obj).then(res => {
        let data = res.data;
        this.obj_number = data.content;
      })
    },
    getCommaFormat(val) {
      if (val) { return toCommaFormat(val); }
      return "-";
    },
    // select选择框
    changelist(val) {
      this.getlist()
    },
    // 搜索按钮
    onSubmit() {
      if (this.reqserdatadate) {
        this.reqserdata.startData = this.reqserdatadate[0];
        this.reqserdata.stopData = this.reqserdatadate[1];
      } else {
        this.reqserdata.startData = "";
        this.reqserdata.stopData = ""
      }
      this.connentSearchlist(this.reqserdata);
    },
    // 改变每页数量
    handleSizeChange(val) {
      this.reqserdata.pageSize = val;
      this.connentSearchlist(this.reqserdata);
    },
    // 改变当前页数
    handleCurrentChange(val) {
      this.reqserdata.pageNo = val;
      this.connentSearchlist(this.reqserdata);
    },
    // 同步速率监控
    getdatarate(obj) {
      ratelist(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          syncdatarate.xAxis.data = data.data.xAxis;
          syncdatarate.series.data = data.data.rows;
          var syncdatarateChart = echarts.init(
            document.getElementById("syncdatarateChart")
          );
          syncdatarateChart.setOption(syncdatarate);
          syncdatarateChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    getlist() {
      let jobInfoId = this.$route.query.jobInfoId;
      let obj = {
        jobInfoId: jobInfoId,
        dataId: this.value
      };

      let obj1 = {
        jobInfoId: jobInfoId,
        type: this.$route.query.type
      }
      // let obj_number = {
      //   jobInfoId: jobInfoId, type: this.$route.query.type
      // }

      // 通过路由判断来源 获取type
      // var routepath
      // switch(this.$route.matched[0].meta.path){
      //   case  '/task':
      //   return routepath = interface
      // }

      let _this = this;
      this.timer = setInterval(() => {
        _this.getasyncdata(obj1);
        _this.getTotalNumber(obj1);
      }, 3000);

      this.getasyncdata(obj1)
      this.getTotalNumber(obj1);
      this.getleftracedata(obj.jobInfoId);
      this.getdatarate(obj);
      this.getaveratedata(obj);
      list(obj).then(res => {
        let { data } = res;
        if (data.code === "200") {
          // let xAxisdata = Object.keys(data);
          // let xAxisdata1 = Object.values(data);
          syncdata.xAxis.data = data.data.xAxis;
          syncdata.dataZoom[0].startValue = data.data.xAxis[0];
          syncdata.series[0].data = data.data.totalNumList;
          syncdata.series[1].data = data.data.addNumList;
          syncdata.series[2].data = data.data.updateNumList;
          var syncdataChart = echarts.init(
            document.getElementById("syncdataChart")
          );
          syncdataChart.setOption(syncdata, true);
          syncdataChart.resize();
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    }
  },
  beforeMount() {
    this.getlist();
  },
  mounted() {
    // var cnLoadChart = echarts.init(document.getElementById("ncLoadChart"));
    // cnLoadChart.setOption(memoryLoadOption);
    // cnLoadChart.resize();

    // var cpLoadChart = echarts.init(document.getElementById("cpLoadChart"));
    // cpLoadChart.setOption(networkLoadOption);
    // cpLoadChart.resize();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  deactivated() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.monitoring {
  display: flex;
  flex-direction: column;
  min-height: 900px;
  min-width: 1600px;
  // > div {
  //   // height: 26.7vh;
  //   // min-height: 260px;
  // }
  > div:nth-child(1) {
    height: 25vh;
    min-height: 250px;
  }
  > div:nth-child(2),
  > div:nth-child(3) {
    height: 24vh;
    min-height: 240px;
  }
  .taskInfo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    > div:nth-child(1) {
      flex: 3;
      padding-right: 1rem;
    }
    > div:nth-child(2) {
      flex: 5;
      padding-right: 1rem;
    }
    > div:nth-child(3) {
      padding-right: 0;
      flex: 5;
    }
    > div {
      height: 100%;
      .boxInfo {
        height: 100%;
        padding: 1.5rem;
        background-color: #f6f9fb;
        .boxChart {
          width: 100%;
          height: 100%;
        }

        .boxImage {
          width: 100%;
          height: 100%;
          text-align: center;
          > img {
            // width: 144px;
            height: 128px;
          }
          > p {
            line-height: 4vh;
            color: #333333;
            opacity: 0.6;
            font-weight: 400;
            > span {
              opacity: 1;
              font-size: 1.5rem;
            }
          }
          > .title {
            color: #2d8cf0;
            opacity: 1;
          }
        }

        .el-row {
          height: 100%;
          .el-col {
            height: 100%;
            // border: 1px solid green;
            position: relative;
            > .el-divider {
              position: absolute;
              right: -3%;
              top: 8%;
              height: 80%;
              width: 1px;
              opacity: 0.76;
            }
          }
        }
      }
      .dbInfo {
        > div {
          > p {
            line-height: 1.5rem;
            margin: 0.2rem 0;
            color: #999999;
          }
          > p:nth-child(3) {
            margin-bottom: 0;
          }
          .title {
            margin-top: 0;
            font-size: 1rem;
            color: #333333;
            font-weight: bold;
          }
          > img {
            margin-top: -10px;
            height: 96px;
          }
        }
        > div:nth-child(2) {
          text-align: center;
        }
      }
    }
  }
  .taskInfo-mid {
    display: flex;
    flex-direction: column;
    .taskInfo-mid-topnav {
      height: 48px;
      line-height: 48px;
      .taskInfo-mid-topnav-left {
        float: left;
        > span {
          padding-left: 14px;
          border-left: 3px solid #128df3;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
        }
      }
      .taskInfo-mid-topnav-right {
        float: right;
        margin-right: 14px;
      }
    }
    .taskInfo-mid-main {
      flex: 1;
      // position: relative;
      .boxChart {
        width: 100%;
        height: 100%;
      }
    }
  }
  .datafromnav {
    height: 42px;
    line-height: 42px;
    text-align: right;
    color: #2d8cf0;
    font-size: 14px;
    width: 100%;
    // background-color: pink;
    padding-right: 10px;
    box-shadow: 1px 0px 3px #888888;
    // margin-right: 10px;
    // border: 1px solid red;
    cursor: pointer;
  }
}
</style>
